<script setup>
import { useRouter } from 'vue-router';
import { ElButton } from 'element-plus';
// import StepIcon from '#/assets/step.png';
import { useAccessStore } from '@vben/stores';
import PDF from '#/components/pdf.vue';
import { ref, computed } from "vue"
import { getMyselfCertifiedApi } from "#/api/certificate/list"
import { getCheckWhiteApi } from '#/api/certificate/white-link';
import { useRoute } from 'vue-router';
import { getExamIdByUserCertificationApi } from '#/api/manage/examination-mgr';

const route = useRoute();
defineOptions({ name: 'Steps' });
const router = useRouter();
const accessStore = useAccessStore();
const dialogVisible = ref(false)
const isQuick = ref(false);
const obs = ref({ Key: '' })
console.log(route.params.id);
const certificationId = ref(route.params.id);
const examId = ref('');
// 表格数据
const tableData = [
  {
    chapter: '第一章 工业数据管理概述',
    sections: [
      '1. 对工业数据管理的基本概念、重要性、范围及框架有初步了解'
    ]
  },
  {
    chapter: '第二章 工业数据管理业务场景及管理规则',
    sections: [
      '1. 了解Item编码、版本、分类、属性、生命周期和权限管理的概念；对管理规则有初步了解和掌握',
      '2. 掌握Part、MPN、BOM的相关概念、基本管理以及企业应用',
      '3. 掌握文档管理的背景、基本概念、工作范围；掌握文档的存管规范、分类方法、编码规则、命名规则、评审发行流程、权限管理、文档复用等',
    ]
  },
  {
    chapter: '第三章 数据管理与数字主线主要技术',
    sections: [
      '1. 了解面向对象的数据管理核心理念',
      '2. 了解数字主线基本概念',
      '3. 了解数字主线的基础支撑技术：建模语言、数据模型、图数据库',
      '4. 了解数据收集、存储、治理、服务等数据生命周期'
    ]
  }
]
const steps = [
  {
    // icon: StepIcon,
    number: '01',
    title: '购买认证',
    description: '注：请联系工作人员兑换专项认证，兑换后方可进行后续步骤。',
    buttonText: '购买认证',
    buttonAction: 'purchaseCertification',
  },
  {
    // icon: StepIcon,
    number: '02',
    title: '在线学习',
    description: '通过在线课程学习，掌握理论基础知识。',
    hasTable: true,
    buttonText: '开始学习',
    buttonAction: 'startLearning',
  },
  {
    // icon: StepIcon,
    number: '03',
    title: '理论考试',
    description: '注：考试形式为线下考试，详情请联系工作人员。',
    buttonText: '参与考试',
    buttonAction: 'participateExam',
  },
  {
    // icon: StepIcon,
    number: '04',
    title: '获取证书',
    description:
      '考试后1-3天内将通知考试结果及证书，请留意邮箱。\n考试通过，可点击 “我的证书” 查看证书编号和下载电子证书。\n证书自颁布之日起2年内有效。',
    buttonText: '我的证书',
    buttonAction: 'getCertificate',
  },
];

const getExamId = () => {
  getExamIdByUserCertificationApi(certificationId.value).then(res => {
    examId.value = res;
  })
}
const toIntro = (type) => {
  if (type == '03' && examId.value) {
    router.push({
      path: `/accreditExam/explainCore/${examId.value}`
    });
  } else if (type === '02') {
    // realNameDialog.value = true
    router.push(`/lesson/intro/${certificationId.value}`);
  } else if (type == '04') {
    dialogVisible.value = true
    getMyselfCertifiedApi({ certificationId: certificationId.value }).then(res => {
      obs.value.Key = res;
    })
  }
};

if (accessStore.accessToken) {
  // 目前定义为certifiedId
  const params = {
    certifiedId: certificationId.value
  }
  getCheckWhiteApi(params).then((res) => {
    isQuick.value = res.checked;
  });
  getExamId();
}

const setDisabled = computed(() => {
  return ({ number, title }) => {
    if (number == '02') return false;
    if (number == '03' && accessStore.accessToken && isQuick.value && examId.value) return false;
    if (number == '04' && accessStore.accessToken && isQuick.value) return false;
    return true;
  };
});

const setDescStyle = (item) => {
  if (['01', '03'].includes(item.number)) {
    return { color: '#c7010c' };
  }
  return {};
};
const popoverVisible = ref(false)
</script>
<template>
  <div class="container p-[32px]">
    <!-- 步骤循环 -->
    <div v-for="(step, index) in steps" :key="index"
      class="group relative mb-12 flex items-start border-b border-[#e4e6eb] pb-4">
      <!-- 左侧图标和标题等 -->
      <div class="relative flex w-20 flex-shrink-0 items-center">
        <img :src="step.icon" alt="Step Icon" class="h-[64px] w-[64px]" />
        <span class="absolute left-[34px] top-[34px] text-[25px] font-bold text-[#c7010c]">{{ step.number }}</span>
      </div>

      <!-- 中间内容 -->
      <div class="flex-1 pl-[20px]">
        <h3 class="mb-2 text-lg font-semibold">{{ step.title }}</h3>
        <p class="mb-4 whitespace-pre-line text-sm text-gray-600" :style="{ ...setDescStyle(step) }">
          {{ step.description }}
        </p>

        <!-- 表格 -->
        <table v-if="step.hasTable" class="mb-4 w-full border-collapse">
          <thead>
            <tr class="text-left">
              <th class="border p-2" style="background-color: #F2F7FF;">Chapter/章</th>
              <th class="border p-2" style="background-color: #F2F7FF;">Goal/学习目标</th>
            </tr>
          </thead>
          <tbody class="text-[14px]">
            <template v-for="(chapterData, chapterIndex) in tableData" :key="chapterIndex">
              <tr v-for="(section, sectionIndex) in chapterData.sections" :key="`${chapterIndex}-${sectionIndex}`"
                class="bg-white">
                <td v-if="sectionIndex === 0" class="border p-2 align-middle" :rowspan="chapterData.sections.length">
                  {{ chapterData.chapter }}
                </td>
                <td class="border p-2">{{ section }}</td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>

      <!-- 右侧按钮 -->
      <div class="absolute right-0 top-0 mt-1">
        <ElButton v-if="step.buttonText" :disabled="setDisabled(step)" plain @click="toIntro(step.number)">
          {{ step.buttonText }}
        </ElButton>
      </div>
    </div>
    <!-- 查看证书 -->
    <el-dialog v-model="dialogVisible" :destroy-on-close="true" title="我的证书" width="600px" :append-to-body="true"
      :close-on-click-modal="false" :before-close="() => dialogVisible = false">
      <div class="overflow-auto h-[500px]">
        <PDF :obs="obs"></PDF>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped>
/* 外层容器留出左侧空间 */
.pl-20 {
  padding-left: 5rem;
}

.left-6 {
  left: 1.5rem;
}
</style>
